// 导入 hairline.scss
@import '../../assets/styles/hairline.scss';

.root {
  :global {
    .title {
      margin: 54px 0 30px 32px;
      color: #333;
      font-size: 24px;
      font-weight: 300;
    }
    .login-wrap {
      padding: 0 33px;
    }
    .form-item {
      position: relative;
      height: 58px;
      margin-bottom: 17px;
      // border-bottom: 1px solid #f0f0f0;
      @include hairline(button, #f0f0f0);
      // 伪元素,相当于.form-item:last-child
      // 也就是给最后一个 .form-item 添加样式
      &:last-child {
        margin-top: 39px;
      }

      input {
        width: 100%;
        line-height: 58px;
        font-size: 16px;
        // 给文本框的placeholder添加样式双伪元素
        &::placeholder {
          color: #a5a6ab;
        }
      }
      button {
        width: 309px;
        height: 50px;
        opacity: 1;
        color: #fff;
        font-size: 16px;
        background: linear-gradient(315deg, #f99999, #ffa179);
        border-radius: 4px;
      }
      .active {
        background: linear-gradient(315deg, #fe4f4f, #fc6627);
      }
    }
    .error {
      position: absolute;
      color: rgb(230, 60, 60);
    }

    // 发送验证码的文字
    .code-text {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 58px;
      color: #ccc;
      font-size: 14px;
    }
  }
}
